import React, { Component } from 'react';
import { NavLink, Switch, Route } from "react-router-dom";
import Home from "../Home/Home";
import Cate from "../Cate/Cate";
import Shop from "../Shop/Shop";
import Mine from "../Mine/Mine";
import home_n from "../../assets/img/home_n.jpeg";
import home_y from "../../assets/img/home_y.jpeg";
import cate_n from "../../assets/img/cate_n.jpeg";
import cate_y from "../../assets/img/cate_y.jpeg";
import shop_n from "../../assets/img/shop_n.jpeg";
import shop_y from "../../assets/img/shop_y.jpeg";
import mine_n from "../../assets/img/mine_n.jpeg";
import mine_y from "../../assets/img/mine_y.jpeg";
import Header from '../../components/Header/Header';
import "./Index.less"

export default class Index extends Component {
  render() {
    let {
      location: { pathname },
    } = this.props;
   
    let topname = this.props.location.pathname.split("/")[2];

    return (
      <div className="index">
        <Header text={topname} back></Header>
        <Switch>
          <Route path="/index/home" component={Home}></Route>
          <Route path="/index/cate" component={Cate}></Route>
          <Route path="/index/shop" component={Shop}></Route>
          <Route path="/index/mine" component={Mine}></Route>
        </Switch>
        {/* 底部 */}
        <footer>
          <NavLink activeClassName="active" to="/index/home">
            <img src={pathname === "/index/home" ? home_y:home_n} alt="" />
            <div>首页</div>
          </NavLink>
          <NavLink activeClassName="active" to="/index/cate">
            <img src={pathname === "/index/cate" ? cate_y:cate_n} alt="" />
            <div>分类</div>
          </NavLink>
          <NavLink activeClassName="active" to="/index/shop">
            <img src={pathname === "/index/shop" ? shop_y:shop_n} alt="" />
            <div>购物车</div>
          </NavLink>
          <NavLink activeClassName="active" to="/index/mine">
            <img src={pathname === "/index/mine" ? mine_y:mine_n} alt="" />
            <div>我的</div>
          </NavLink>
        </footer>
      </div>
    )
  }
}
